<template>
  <div id="app">
    <div class="background-container">
      <router-view/>
    </div>
  </div>
</template>

<style>
 #app {
   height: 100vh; /* 使容器占满整个视口高度 */
   margin: 0; /* 去除默认边距 */
 }
.background-container {
  background-image: url('@/assets/bg.jpg'); /* 背景图像路径 */
  background-size: cover; /* 背景图像覆盖整个容器 */
  background-position: center; /* 背景图像居中 */
  background-repeat: no-repeat; /* 不重复背景图像 */
  height: 100%; /* 高度占满父容器 */
  width: 100%; /* 宽度占满父容器 */
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
